<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="页面导航" name="first">
      <template>
        <el-row class="margin">
          <el-button type="primary" plain @click="dialogFormVisible = true">添加</el-button>
          <el-button type="primary" plain @click="batchDelete1()">批量删除</el-button>
        </el-row>
        <el-table
          :data="tableData1"
          stripe
          style="width: 100%"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          class="mt10"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="categoryId" label="导航Id" width="180"></el-table-column>
          <el-table-column prop="channelId" label="导航Id" width="180"></el-table-column>
          <el-table-column prop="name" label="导航名称" width="180"></el-table-column>
          <el-table-column prop="address" label="导航地址" width="180"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="deleteFlag" label="是否启用"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest1"
            :current-page="tableData1.pageNum"
            :page-size="tableData1.pageSize"
            :total="tableData1.total"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange1"
          ></el-pagination>
        </div>
      </template>
      <el-button type="primary" plain @click="save1">保存设置</el-button>
      <el-dialog title="添加页面导航" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="120px">
          <el-row class="searchDialog-input">
            <el-form-item label="导航名称：" :label-width="formLabelWidth">
              <el-input v-model="form1.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="导航地址：" :label-width="formLabelWidth">
              <el-input v-model="form1.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述信息：" :label-width="formLabelWidth">
              <el-input v-model="form1.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序：" :label-width="formLabelWidth">
              <el-input v-model="form1.sort" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用：" :label-width="formLabelWidth">
              <el-radio v-model="form1.use" label="1">是</el-radio>
              <el-radio v-model="form1.use" label="2">否</el-radio>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="分类导航" name="second">
      <span>显示分类导航:</span>
      <el-radio v-model="radio" label="1">是</el-radio>
      <el-radio v-model="radio" label="2">否</el-radio>
      <br>
      <el-select v-model="value" placeholder="请选择" value="0">
        <el-option
          v-for="item in levelOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <br>
      <span>是否显示品牌:</span>
      <el-radio v-model="sign" label="1">是</el-radio>
      <el-radio v-model="sign" label="2">否</el-radio>
      <br>
      <el-button type="primary" plain @click="save2">保存设置</el-button>
    </el-tab-pane>
    <el-tab-pane label="轮播大广告" name="third">
      <template>
        <el-row class="margin">
          <el-button type="primary" plain @click="add3()">添加</el-button>
          <el-button type="primary" plain @click="batchDelete3()">批量删除</el-button>
        </el-row>
        <el-table
          :data="tableData3"
          stripe
          style="width: 100%"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="location" label="广告位置" width="180"></el-table-column>
          <el-table-column prop="img" label="图片" width="180"></el-table-column>
          <el-table-column prop="linkAddress" label="链接地址"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="use" label="是否启用"></el-table-column>
          <el-table-column prop="operation" label="操作"></el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest3"
            :current-page="tableData3.pageNum"
            :page-size="tableData3.pageSize"
            :total="tableData3.total"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange3"
          ></el-pagination>
        </div>
      </template>
      <el-button type="primary" plain @click="save3">保存设置</el-button>
      <el-dialog title="添加模板广告" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="120px">
          <el-row class="searchDialog-input">
            <el-form-item label="广告名称：" :label-width="formLabelWidth">
              <el-input v-model="form3.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告图片：" :label-width="formLabelWidth">
              <el-input v-model="form3.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告链接：" :label-width="formLabelWidth">
              <el-input v-model="form3.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序：" :label-width="formLabelWidth">
              <el-input v-model="form3.sort" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用：" :label-width="formLabelWidth">
              <el-radio v-model="form3.use" label="1">是</el-radio>
              <el-radio v-model="form3.use" label="2">否</el-radio>
            </el-form-item>
            <el-select v-model="form3.adLocation" placeholder="请选择" value="0">
              <el-option
                v-for="item in adLocationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-form-item label="广告描述：" :label-width="formLabelWidth">
              <el-text v-model="form3.desc" autocomplete="off"></el-text>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="轮播小广告" name="fourth">
      <template>
        <el-row class="margin">
          <el-button type="primary" plain @click="add4()">添加</el-button>
          <el-button type="primary" plain @click="batchDelete4()">批量删除</el-button>
        </el-row>
        <el-table
          :data="tableData4"
          stripe
          style="width: 100%"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="location" label="广告位置" width="180"></el-table-column>
          <el-table-column prop="img" label="图片" width="180"></el-table-column>
          <el-table-column prop="linkAddress" label="链接地址"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="use" label="是否启用"></el-table-column>
          <el-table-column prop="operation" label="操作"></el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest4"
            :current-page="tableData4.pageNum"
            :page-size="tableData4.pageSize"
            :total="tableData4.total"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange4"
          ></el-pagination>
        </div>
      </template>
      <el-button type="primary" plain @click="save4">保存设置</el-button>
      <el-dialog title="添加模板广告" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="120px">
          <el-row class="searchDialog-input">
            <el-form-item label="广告名称：" :label-width="formLabelWidth">
              <el-input v-model="form4.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告图片：" :label-width="formLabelWidth">
              <el-input v-model="form4.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告链接：" :label-width="formLabelWidth">
              <el-input v-model="form4.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序：" :label-width="formLabelWidth">
              <el-input v-model="form4.sort" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用：" :label-width="formLabelWidth">
              <el-radio v-model="form4.use" label="1">是</el-radio>
              <el-radio v-model="form4.use" label="2">否</el-radio>
            </el-form-item>
            <el-select v-model="form4.adLocation" placeholder="请选择" value="0">
              <el-option
                v-for="item in adLocationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-form-item label="广告描述：" :label-width="formLabelWidth">
              <el-text v-model="form4.desc" autocomplete="off"></el-text>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="页面广告" name="fifth">
      <template>
        <el-row class="margin">
          <el-button type="primary" plain @click="add5()">添加</el-button>
          <el-button type="primary" plain @click="batchDelete5()">批量删除</el-button>
        </el-row>
        <el-table
          :data="tableData5"
          stripe
          style="width: 100%"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="location" label="广告位置" width="180"></el-table-column>
          <el-table-column prop="img" label="图片" width="180"></el-table-column>
          <el-table-column prop="linkAddress" label="链接地址"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="use" label="是否启用"></el-table-column>
          <el-table-column prop="operation" label="操作"></el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest5"
            :current-page="tableData5.pageNum"
            :page-size="tableData5.pageSize"
            :total="tableData5.total"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange5"
          ></el-pagination>
        </div>
      </template>
      <el-button type="primary" plain @click="save5">保存设置</el-button>
      <el-dialog title="添加模板广告" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-row class="searchDialog-input">
            <el-form-item label="广告名称：" :label-width="formLabelWidth">
              <el-input v-model="form5.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告图片：" :label-width="formLabelWidth">
              <el-input v-model="form5.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告链接：" :label-width="formLabelWidth">
              <el-input v-model="form5.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序：" :label-width="formLabelWidth">
              <el-input v-model="form5.sort" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用：" :label-width="formLabelWidth">
              <el-radio v-model="form5.use" label="1">是</el-radio>
              <el-radio v-model="form5.use" label="2">否</el-radio>
            </el-form-item>
            <el-select v-model="form5.adLocation" placeholder="请选择" value="0">
              <el-option
                v-for="item in adLocationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-form-item label="广告描述：" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form5.desc" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="新闻公告" name="sixth">
      <el-row class="search-input">
        <el-select v-model="value" placeholder="请选择" value="0">
          <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input label="活动名称">活动名称</el-input>
      </el-row>
      <el-button type="primary" plain @click="save6">保存设置</el-button>
    </el-tab-pane>
    <el-tab-pane label="楼层设置" name="seventh">
      <template>
        <el-row class="margin">
          <el-button type="primary" plain @click="add7()">添加</el-button>
          <el-button type="primary" plain @click="batchDelete7()">批量删除</el-button>
        </el-row>
        <el-table
          :data="tableData7"
          stripe
          style="width: 100%"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="location" label="楼层名称" width="180"></el-table-column>
          <el-table-column prop="img" label="楼层图片" width="180"></el-table-column>
          <el-table-column prop="linkAddress" label="楼层数"></el-table-column>
          <el-table-column prop="use" label="是否启用"></el-table-column>
          <el-table-column prop="operation" label="操作"></el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest7"
            :current-page="tableData7.pageNum"
            :page-size="tableData7.pageSize"
            :total="tableData7.total"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange7"
          ></el-pagination>
        </div>
      </template>
      <el-button type="primary" plain @click="save7">保存设置</el-button>
      <el-dialog title="添加模板楼层" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="120px">
          <el-row class="searchDialog-input">
            <el-form-item label="楼层分类：" :label-width="formLabelWidth">
              <el-select v-model="form7.adLocation" placeholder="请选择" value="0">
                <el-option
                  v-for="item in buildTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼层名称：" :label-width="formLabelWidth">
              <el-input v-model="form7.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="楼层图片：" :label-width="formLabelWidth">
              <el-input v-model="form7.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片链接：" :label-width="formLabelWidth">
              <el-input v-model="form7.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序：" :label-width="formLabelWidth">
              <el-input v-model="form7.sort" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用：" :label-width="formLabelWidth">
              <el-radio v-model="form7.use" label="1">是</el-radio>
              <el-radio v-model="form7.use" label="2">否</el-radio>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="热门搜索" name="eighth">
      <template>
        <el-row class="margin">
          <el-button type="primary" plain @click="add8()">添加</el-button>
          <el-button type="primary" plain @click="batchDelete8()">批量删除</el-button>
        </el-row>
        <el-table
          :data="tableData8"
          stripe
          style="width: 100%"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="hotSearch" label="热门搜索" width="180"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
          <el-table-column prop="operation" label="操作"></el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest8"
            :current-page="tableData8.pageNum"
            :page-size="tableData8.pageSize"
            :total="tableData8.total"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange8"
          ></el-pagination>
        </div>
      </template>
      <el-button type="primary" plain @click="save8">保存设置</el-button>
      <el-dialog title="添加热门搜索" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="120px">
          <el-row class="searchDialog-input">
            <el-form-item label="热门搜索：" :label-width="formLabelWidth">
              <el-input v-model="form8.hotSearch" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序：" :label-width="formLabelWidth">
              <el-input v-model="form8.sort" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="热销推荐" name="ninth">
      <template>
        <el-row class="margin">
          <el-button type="primary" plain @click="add9()">添加</el-button>
          <el-button type="primary" plain @click="batchDelete9()">批量删除</el-button>
        </el-row>
        <el-table
          :data="tableData9"
          stripe
          style="width: 100%"
          ref="multipleTable"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="hotSearch" label="货品图片" width="180"></el-table-column>
          <el-table-column prop="sort" label="货品编号"></el-table-column>
          <el-table-column prop="sort" label="排序" width="180"></el-table-column>
          <el-table-column prop="operation" label="操作"></el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="refreshPageRequest9"
            :current-page="tableData9.pageNum"
            :page-size="tableData9.pageSize"
            :total="tableData9.total"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange9"
          ></el-pagination>
        </div>
      </template>
      <el-button type="primary" plain @click="save9">保存设置</el-button>
      <el-dialog title="添加热销推荐商品" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="140px">
           <el-row class="searchDialog-input">
               <el-form-item label="选择商品：" :label-width="formLabelWidth">
            <el-select v-model="form9.adLocation" placeholder="请选择" value="0">
              <el-option
                v-for="item in buildTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品编号：" :label-width="formLabelWidth">
            <el-input v-model="form9.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称：" :label-width="formLabelWidth">
            <el-input v-model="form9.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="预览商品图片链接：" :label-width="formLabelWidth">
            <el-input v-model="form9.detail" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="优惠价：" :label-width="formLabelWidth">
            <el-input v-model="form9.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序：" :label-width="formLabelWidth">
            <el-input v-model="form9.sort" autocomplete="off"></el-input>
          </el-form-item>
           </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="活动" name="tenth">
       <el-row class="search-input">
          <el-select v-model="value" placeholder="请选择" value="0">
        <el-option
          v-for="item in singlePageOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input label="活动名称">活动名称</el-input>
       </el-row>
      <el-button type="primary" plain @click="save10">保存设置</el-button>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  /**
   * 1.导包区;
   */

  /**
   * 2.组件区;
   */
  components: {},

  /**
   * 3.数据区;
   * @returns {{}}
   */
  data() {
    return {
      //默认跳转的tab框;
      activeName: "first",
      //查看示意图跳转地址;
      schematicUrl: "http://o2o.kstore.shop/boss/images/temp/shuma.jpg",
      radio: "1",
      pageRequest: { pageNum: 1, pageSize: 10 },
      sign: "",
      //导航配置表;
      tableData1: [
        {
          start: 0,
          limit: 0,
          total: 0
        }
      ],

      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",

      //大广告轮播配置表;
      tableData3: [
        {
          start: 0,
          pageSize: 0,
          total: 0
        }
      ],
      //小广告轮播配置表;
      tableData4: [
        {
          start: 0,
          pageSize: 0,
          total: 0
        }
      ],
      //广告配置表
      tableData5: [
        {
          start: 0,
          pageSize: 0,
          total: 0
        }
      ],
      //楼层表
      tableData7: [
        {
          start: 0,
          pageSize: 0,
          total: 0
        }
      ],
      //热门搜索配置表
      tableData8: [
        {
          start: 0,
          pageSize: 0,
          total: 0
        }
      ],
      //热销推荐表
      tableData9: [
        {
          start: 0,
          pageSize: 0,
          total: 0
        }
      ],
      //分级次数
      levelOptions: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        }
      ],
      //单页标签
      singlePageOptions: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        }
      ],
      adLocationOptions: [
        {
          value: 1,
          label: "广告首页"
        },
        {
          value: 2,
          label: "抢购页广告"
        }
      ],
      buildTypeOptions: [
        {
          value: 1,
          label: "顶楼"
        },
        {
          value: 2,
          label: "中间楼"
        },
        {
          value: 2,
          label: "底楼"
        }
      ],
      value: "", //分级次数下拉框的值;
      form1: {
        name: "",
        address: "",
        detail: "",
        sort: 0,
        use: 1
      },
      form3: {
        name: "",
        address: "",
        detail: "",
        sort: 0,
        use: 1,
        adLocation: 0,
        desc: ""
      },
      form4: {
        name: "",
        address: "",
        detail: "",
        sort: 0,
        use: 1,
        adLocation: 0,
        desc: ""
      },
      form5: {
        name: "",
        address: "",
        detail: "",
        sort: 0,
        use: 1,
        adLocation: 0,
        desc: ""
      },
      form7: {
        name: "",
        address: "",
        detail: "",
        sort: 0,
        use: 1,
        adLocation: 0,
        desc: ""
      },
      form8: {
        hotSearch: "",
        sort: 0
      },
      form9: {
        name: "",
        address: "",
        detail: "",
        sort: 0,
        use: 1,
        adLocation: 0,
        desc: "",
        price: 0
      }
    };
  },

  /**
   * 4.方法区;
   */
  methods: {
    //点击当前tab框
    handleClick(tab, event) {
      if (tab.paneName === "first") {
        this.findPage1();
      } else if (tab.paneName === "second") {
        this.findPage2();
      } else if (tab.paneName === "third") {
        this.findPage3();
      } else if (tab.paneName === "fourth") {
        this.findPage4();
      } else if (tab.paneName === "fifth") {
        this.findPage5();
      } else if (tab.paneName === "sixth") {
        this.findPage6();
      } else if (tab.paneName === "seventh") {
        this.findPage7();
      } else if (tab.paneName === "eighth") {
        this.findPage8();
      } else if (tab.paneName === "ninth") {
        this.findPage9();
      } else if (tab.paneName === "tenth") {
        this.findPage10();
      }
    },

    // 换页刷新
    refreshPageRequest1: function(pageNum) {
      this.tableData1.start = pageNum;
      this.findPage1();
    },
    // 换页刷新
    handleSizeChange1: function(pageSize) {
      this.tableData1.start = 1;
      this.tableData1.limit = pageSize;
      this.findPage1();
    },
    // 换页刷新
    refreshPageRequest2: function(pageNum) {
      this.tableData2.start = pageNum;
      this.findPage2();
    },
    // 换页刷新
    handleSizeChange2: function(pageSize) {
      this.tableData2.start = 1;
      this.tableData2.limit = pageSize;
      this.findPage2();
    },
    // 换页刷新
    refreshPageRequest3: function(pageNum) {
      this.tableData3.start = pageNum;
      this.findPage3();
    },
    // 换页刷新
    handleSizeChange3: function(pageSize) {
      this.tableData3.start = 1;
      this.tableData3.limit = pageSize;
      this.findPage3();
    },
    // 换页刷新
    refreshPageRequest4: function(pageNum) {
      this.tableData4.start = pageNum;
      this.findPage4();
    },
    // 换页刷新
    handleSizeChange4: function(pageSize) {
      this.tableData4.start = 1;
      this.tableData4.limit = pageSize;
      this.findPage4();
    },
    // 换页刷新
    refreshPageRequest5: function(pageNum) {
      this.tableData5.start = pageNum;
      this.findPage5();
    },
    // 换页刷新
    handleSizeChange5: function(pageSize) {
      this.tableData6.start = 1;
      this.tableData6.limit = pageSize;
      this.findPage6();
    },
    // 换页刷新
    refreshPageRequest6: function(pageNum) {
      this.tableData6.start = pageNum;
      this.findPage6();
    },
    // 换页刷新
    handleSizeChange6: function(pageSize) {
      this.tableData6.start = 1;
      this.tableData6.limit = pageSize;
      this.findPage6();
    },
    // 换页刷新
    refreshPageRequest7: function(pageNum) {
      this.tableData7.start = pageNum;
      this.findPage7();
    },
    // 换页刷新
    handleSizeChange7: function(pageSize) {
      this.tableData7.start = 1;
      this.tableData7.limit = pageSize;
      this.findPage7();
    },
    // 换页刷新
    refreshPageRequest8: function(pageNum) {
      this.tableData8.start = pageNum;
      this.findPage8();
    },
    // 换页刷新
    handleSizeChange8: function(pageSize) {
      this.tableData8.start = 1;
      this.tableData8.limit = pageSize;
      this.findPage8();
    },
    // 换页刷新
    refreshPageRequest9: function(pageNum) {
      this.tableData9.start = pageNum;
      this.findPage9();
    },
    // 换页刷新
    handleSizeChange9: function(pageSize) {
      this.tableData9.start = 1;
      this.tableData9.limit = pageSize;
      this.findPage9();
    },
    // 换页刷新
    refreshPageRequest10: function(pageNum) {
      this.tableData10.start = pageNum;
      this.findPage10();
    },
    // 换页刷新
    handleSizeChange10: function(pageSize) {
      this.tableData10.start = 1;
      this.tableData10.limit = pageSize;
      this.findPage1();
    },

    //列表查询
    findPage1: function() {
      const this_ = this;
      if (this_.tableData1 === undefined || this_.tableData1 === null) {
        this_.tableData1 = {};
      }
      this_.tableData1.start = this_.pageRequest.pageNum;
      this_.tableData1.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData1, function(res) {
        this_.tableData1 = res.data.data;
        this_.tableData1.total = res.data.length;
      });
    },
    //列表查询
    findPage2: function() {
      const this_ = this;
      if (this_.tableData2 === undefined || this_.tableData2 === null) {
        this_.tableData2 = {};
      }
      this_.tableData2.start = this_.pageRequest.pageNum;
      this_.tableData2.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData2, function(res) {
        this_.tableData2 = res.data.data;
        this_.tableData2.total = res.data.length;
      });
    },
    //列表查询
    findPage3: function() {
      const this_ = this;
      if (this_.tableData3 === undefined || this_.tableData3 === null) {
        this_.tableData3 = {};
      }
      this_.tableData3.start = this_.pageRequest.pageNum;
      this_.tableData3.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData3, function(res) {
        this_.tableData3 = res.data.data;
        this_.tableData3.total = res.data.length;
      });
    },
    //列表查询
    findPage4: function() {
      const this_ = this;
      if (this_.tableData4 === undefined || this_.tableData4 === null) {
        this_.tableData4 = {};
      }
      this_.tableData4.start = this_.pageRequest.pageNum;
      this_.tableData4.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData4, function(res) {
        this_.tableData4 = res.data.data;
        this_.tableData4.total = res.data.length;
      });
    },
    //列表查询
    findPage5: function() {
      const this_ = this;
      if (this_.tableData5 === undefined || this_.tableData5 === null) {
        this_.tableData5 = {};
      }
      this_.tableData5.start = this_.pageRequest.pageNum;
      this_.tableData5.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData5, function(res) {
        this_.tableData5 = res.data.data;
        this_.tableData5.total = res.data.length;
      });
    },
    //列表查询
    findPage6: function() {
      const this_ = this;
      if (this_.tableData6 === undefined || this_.tableData6 === null) {
        this_.tableData6 = {};
      }
      this_.tableData6.start = this_.pageRequest.pageNum;
      this_.tableData6.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData6, function(res) {
        this_.tableData6 = res.data.data;
        this_.tableData6.total = res.data.length;
      });
    },
    //列表查询
    findPage7: function() {
      const this_ = this;
      if (this_.tableData7 === undefined || this_.tableData7 === null) {
        this_.tableData7 = {};
      }
      this_.tableData7.start = this_.pageRequest.pageNum;
      this_.tableData7.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData7, function(res) {
        this_.tableData7 = res.data.data;
        this_.tableData7.total = res.data.length;
      });
    },
    //列表查询
    findPage8: function() {
      const this_ = this;
      if (this_.tableData8 === undefined || this_.tableData8 === null) {
        this_.tableData8 = {};
      }
      this_.tableData8.start = this_.pageRequest.pageNum;
      this_.tableData8.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData8, function(res) {
        this_.tableData8 = res.data.data;
        this_.tableData8.total = res.data.length;
      });
    },
    //列表查询
    findPage9: function() {
      const this_ = this;
      if (this_.tableData9 === undefined || this_.tableData9 === null) {
        this_.tableData9 = {};
      }
      this_.tableData9.start = this_.pageRequest.pageNum;
      this_.tableData9.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData9, function(res) {
        this_.tableData9 = res.data.data;
        this_.tableData9.total = res.data.length;
      });
    },
    //列表查询
    findPage10: function() {
      const this_ = this;
      if (this_.tableData10 === undefined || this_.tableData10 === null) {
        this_.tableData10 = {};
      }
      this_.tableData10.start = this_.pageRequest.pageNum;
      this_.tableData10.limit = this_.pageRequest.pageSize;
      this.utils.request.listChannelCategory(this_.tableData10, function(res) {
        this_.tableData10 = res.data.data;
        this_.tableData10.total = res.data.length;
      });
    },

    //新增;
    add1() {},
    add2() {},
    add3() {},
    add4() {},
    add5() {},
    add7() {},
    add8() {},
    add9() {},

    //批量删除
    batchDelete1() {},

    batchDelete3() {},
    batchDelete4() {},
    batchDelete5() {},
    batchDelete7() {},
    batchDelete8() {},
    batchDelete9() {},

    //保存第11个tab框;
    save1() {},
    save2() {},
    save3() {},
    save4() {},
    save5() {},
    save6() {},
    save7() {},
    save8() {},
    save9() {},
    save10() {},

    //表格中的多选;
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    //选项变化;
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },

  /**
   * 5.初始化区;
   */
  //初始化页面后加载组件;
  mounted() {
    this.findPage1();
  }
};
</script>

<style lang='scss' scoped>
.mt10 {
  margin-top: 10px;
}
.margin {
  text-align: right;
  margin: 5px 0 20px;
}
</style>

